<?php
use_stylesheet('data/main.css');
use_stylesheet('data/rightpanel.css');
use_javascript('data/helper.js');
use_javascript('map/map.js');
use_javascript('map/ProjectedOverlay.js');
use_javascript('data/overlay.js');
?>

<?php if($overlays->count() > 0): ?>
<body onload="onLoad(<?php echo $overlayid; ?>);">
<?php else: ?>
<body onload="onLoad(null);">
<?php endif;?>

    <div id="map_canvas">

    </div>

    <div class="rightpanel">

        <div id="overlayimageeditCoordinates" class="panelheader ui-widget-header" align="center" >Overlay Image</div>
        
        <div class="obs-link"><a href="<?php echo url_for('data/showObservation?id='.$id) ?>" class="home">See Observations</a></div>
        <br/>
        <ul>
            <li>
                <?php if($overlays->count() > 0): ?>
                    <label for="overlayimg">Select Title: </label>
                    <select id="overlayimg" onchange="displayOverlay(this.options[this.selectedIndex].value)">
                    <?php foreach($overlays as $item): ?>
                        <?php if($overlayid == $item->id): ?>
                        <option value="<?php echo $item->id; ?>" selected><?php echo $item->overlaytitle ?></option>
                        <?php else: ?>
                        <option value="<?php echo $item->id; ?>"><?php echo $item->overlaytitle ?></option>
                        <?php endif;?>
                    <?php endforeach;?>
                </select>
                <?php endif; ?>
            </li>
            <li>
                <?php if($overlays->count() == 0): ?>
                    <p class="ui-widget">No overlay image for this research. Try to upload some.</p>
                    
                <?php else: ?>
                    <a id="edit" href="javascript:initResizer(); editOverlay()" class="editoverlay">Edit</a>
                <?php endif; ?>
                <a id="add" href="javascript:addOverlay()" class="addoverlay">Add</a>
                
                <?php if($overlays->count() > 0): ?>
<!--                    <a href="javascript:saveOverlay()" class="saveoverlay">Save</a>-->
<!--                    <a href="javascript:deleteOverlay()" class="deleteoverlay">Remove</a>-->
                <?php endif; ?>
            </li>
            <li id="overlayform">
                <p/>
                <form id="overlay_form" method = "post" action = "<?php echo url_for('data/saveOverlay?id=' . $id) ?>" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>>
                    <?php echo $form['upload']->renderLabel('Overlay File'); ?>
                    <?php echo $form['upload']->render(array('class' => 'ui-widget ui-widget-content ui-corner-all')); ?>
                    
                    <?php echo $overlayform['id']->render() ?>
                    <?php echo $overlayform['researchid']->render() ?>
                    <?php echo $overlayform['overlaytitle']->renderLabel('Title') ?>
                    <?php echo $overlayform['overlaytitle']->render(array('class' => 'ui-widget ui-widget-content ui-corner-all')) ?>
                    <?php echo $overlayform['overlaydescription']->renderLabel('Description') ?>
                    <?php echo $overlayform['overlaydescription']->render(array('class' => 'ui-widget ui-widget-content ui-corner-all')) ?>

                    <?php echo $overlayform['slat']->render() ?>
                    <?php echo $overlayform['nlat']->render() ?>
                    <?php echo $overlayform['wlng']->render() ?>
                    <?php echo $overlayform['elng']->render() ?>

                    <?php echo $form['_csrf_token']; ?>
                    <?php echo $overlayform['_csrf_token']; ?>
                    <p/>
                    <button type="submit" class="" id="save">Save</button>
                    <button id="cancel" class="" type="reset">Cancel</button>
                </form>
                <a href="javascript:deleteOverlay()" class="deleteoverlay">Remove</a>
            </li>
        </ul>
    </div>
</body>
